<template>
  <div>
    <ContentHeader title="课程管理">
      <template #title>
        <el-button type="primary" size="small" @click="handleCreate">
          <el-icon><Plus /></el-icon>
          添加新课程
        </el-button>
      </template>
      <el-form :model="store.search" inline>
        <el-form-item>
          <el-cascader
            v-model="store.search.categoryId"
            :options="store.categories"
            :props="{
              expandTrigger: 'hover',
              value: 'id',
              label: 'title'
            }"
            placeholder="请选择课程分类"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-col :span="11">
            <el-input
              v-model="store.search.minPrice"
              placeholder="课程最低价"
              style="width: 100px"
              clearable
            />
          </el-col>
          <el-col :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-input
              v-model="store.search.maxPrice"
              placeholder="课程最高价"
              style="width: 100px"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="store.search.year"
            placeholder="更新时间"
            clearable
            style="width: 100px"
          >
            <el-option v-for="year in range(2023, 2030)" :label="year" :value="year" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="store.search.recommend"
            placeholder="全部"
            clearable
            style="width: 100px"
          >
            <el-option label="推荐" :value="true" />
            <el-option label="不推荐" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="store.search.onself"
            placeholder="全部"
            clearable
            style="width: 100px"
          >
            <el-option label="已上架" :value="true" />
            <el-option label="未上架" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="store.search.title" placeholder="课程名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </el-form-item>
      </el-form>
    </ContentHeader>
    <ContentBody v-loading="store.loading">
      <el-table :data="store.lessons" :stripe="true" :highlight-current-row="true">
        <el-table-column property="id" width="80" />
        <el-table-column property="title" label="课程名称" />
        <el-table-column property="thumb" label="课程封面">
          <template #default="scope">
            <el-image
              :src="cfg.imageUrl(scope.row.thumb)"
              fit="contain"
              v-if="scope.row.thumb !== ''"
            />
            <span v-else>无封面</span>
          </template>
        </el-table-column>
        <el-table-column property="categoryTitle" label="所属分类" />
        <el-table-column
          property="price"
          label="价格"
          :formatter="(row: any) => '￥' + row.price"
        />
        <el-table-column
          property="marketPrice"
          label="市场价格"
          :formatter="(row: any) => '￥' + row.marketPrice"
        />
        <el-table-column property="teachers" label="教师" />
        <el-table-column property="chapterCount" label="章节">
          <template #default="scope">
            <RouterLink
              :to="{ name: 'course_lesson_chapter', params: { lessonId: scope.row.id } }"
              >{{ scope.row.chapterCount }}</RouterLink
            >
          </template>
        </el-table-column>
        <el-table-column property="ebookCount" label="资料">
          <template #default="scope">
            <RouterLink :to="{ name: 'course_lesson_ebook', params: { lessonId: scope.row.id } }">{{
              scope.row.ebookCount
            }}</RouterLink>
          </template>
        </el-table-column>
        <el-table-column
          property="updatedAt"
          label="更新时间"
          :formatter="(row: any) => timeFormatter(row.updatedAt)"
        />
        <el-table-column property="recommend" label="推荐">
          <template #default="scope">
            <el-switch v-model="scope.row.recommend" @change="handleRecommend" />
          </template>
        </el-table-column>
        <el-table-column property="onself" label="上架">
          <template #default="scope">
            <el-switch v-model="scope.row.onself" @change="handleOnself" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template #default="scope">
            <el-button plain @click="handleContent(scope.row)">
              <el-icon size="small"><EditPen /></el-icon>修改内容
            </el-button>
            <el-button plain @click="handleUpdate(scope.row)">
              <el-icon size="small"><Edit /></el-icon> 修改
            </el-button>
            <el-button plain @click="handleDelete(scope.row)">
              <el-icon size="small"><Delete /></el-icon> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #pagination>
        <el-pagination
          background
          hideOnSinglePage
          layout="prev, pager, next"
          :total="store.pager.total"
          :page-size="store.pager.pageSize"
          @current-change="handlePageChange"
        />
      </template>
    </ContentBody>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useLessonStore } from '@/stores/lesson'
import { RouterLink, useRouter } from 'vue-router'
import { Edit, EditPen, Delete, Plus, Search } from '@element-plus/icons-vue'
import { timeFormatter, range } from '@/utils/utils'
import cfg from '@/config/config'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { LessonItem } from '@/config/types'

const store = useLessonStore()
const router = useRouter()

const handlePageChange = (currentPage: number) => {
  store.changePage(currentPage, store.pager.pageSize)
}
const handleSearch = () => {
  store.changePage(1, store.pager.pageSize)
}
const handleCreate = () => {
  router.push({ name: 'course_lesson_create' })
}
const handleUpdate = (lesson: LessonItem) => {
  router.push({ name: 'course_lesson_update', params: { id: lesson.id } })
}
const handleContent = (lesson: LessonItem) => {
  router.push({ name: 'course_lesson_content', params: { id: lesson.id } })
}
const handleRecommend = (val: boolean) => {
  store.updateRecommend(val)
}
const handleOnself = (val: boolean) => {
  store.updateOnself(val)
}
const handleDelete = (lesson: LessonItem) => {
  ElMessageBox.confirm('确定要删除课程' + lesson.title + '吗?', '确定删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    const result = await store.removeLesson(lesson.id)
    if (result) {
      ElMessage.success('删除成功')
      store.loadLessons()
    }
  })
}

onMounted(() => {
  store.loadLessons()
})
</script>
